---
import { Sparkle, ChevronRight } from "lucide-astro";
---

<style>
  @keyframes spinner {
    to {
      transform: rotate(360deg);
    }
  }
  .spinner:before {
    content: "";
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    margin-left: -7px;
    border-radius: 50%;
    border: 2px solid #fff;
    border-top-color: #333;
    animation: spinner 0.6s linear infinite;
  }
</style>

<script>
  let formatter = Intl.NumberFormat("en", { notation: "compact" });

  document.addEventListener("DOMContentLoaded", () => {
    const starCountElement = document.getElementById("star-count");
    if (starCountElement) {
      starCountElement.classList.add("spinner");

      fetch("https://api.github.com/repos/roninoss/create-expo-stack")
        .then((response) => response.json())
        .then((data) => {
          starCountElement.classList.remove("spinner");
          const starCount = data.stargazers_count;
          starCountElement.textContent = formatter.format(starCount);
        })
        .catch((error) => {
          starCountElement.classList.remove("spinner");
          console.error("Error:", error);
        });
    }
  });
</script>
<a
  target="_blank"
  rel="noreferrer noopener"
  href="https://github.com/roninoss/create-expo-stack"
  class="text-sm m-2 md:text-base group border hover:no-underline border-zinc-400/50 bg-gradient-to-r from-amber-500/30 to-white/5 rounded-full p-2 px-3 sm:p-1 sm:px-2 mx-auto flex gap-2 items-center text-zinc-50 font-thin duration-300 hover:border-zinc-300/50 shadow-[0_0_0.5rem_0_#fff2] hover:shadow-[0_0_5rem_0_#fff4]"
>
  <Sparkle
    class="lucide-sparkle w-4 h-4 duration-150 group-hover:stroke-amber-500 group-hover:rotate-180"
  />
  <span
    id="star-count"
    class="bg-gradient-to-br from-yellow-500 to-orange-500 bg-clip-text text-transparent drop-shadow-xl font-bold"
  ></span>
  <span class="opacity-50">|</span>
  <span class="hidden sm:block">Give us a star on Github</span>
  <span class="sm:hidden">Star us on Github</span>
  <ChevronRight
    class="lucide-chevron-right w-4 h-4 duration-300 group-hover:translate-x-0.5"
  />
</a>
